ナビゲーションとルーティング

コンテンツ

Flutter は、画面間の移動と処理のための完全なシステムを提供します。深いリンク。複雑なディープリンクを持たない小規模なアプリケーションは、Navigator、一方、特定のディープリンクとナビゲーションを備えたアプリ要件も使用する必要がありますRouterディープリンクを正しく処理するには Android と iOS、アプリの起動時にアドレスバーとの同期を維持するにはウェブ上で実行されています。

ディープリンクを処理するように Android または iOS アプリケーションを構成するには、次を参照してください。ディープリンク。

ナビゲーターの使用

のNavigatorウィジェットは正しいトランジションを使用して画面をスタックとして表示しますターゲットプラットフォーム用のアニメーション。新しい画面に移動するには、Navigatorルートを通じてBuildContextそして、次のような命令型メソッドを呼び出しますとしてpush() or pop():

onPressed: () {
  Navigator.of(context).push(
    MaterialPageRoute(
      builder: (context) => const SongScreen(song: song),
    ),
  );
},
child: Text(song.name),

なぜならNavigatorのスタックを保持しますRouteオブジェクト（歴史を表す）スタック)、push()メソッドもRoute物体。のMaterialPageRouteオブジェクトはのサブクラスですRouteトランジションアニメーションを指定しますマテリアルデザイン。使用方法のその他の例については、Navigator、に従ってくださいナビゲーションレシピFlutter クックブックから入手するか、次の Web サイトにアクセスしてください。ナビゲーターAPI ドキュメンテーション。

名前付きルートの使用

シンプルなナビゲーションとディープリンク要件を持つアプリケーションは、NavigatorナビゲーションとMaterialApp.routesディープのパラメータリンク:

@override
  Widget build(BuildContext context) {
  return MaterialApp(
    routes: {
      '/': (context) => HomeScreen(),
      '/details': (context) => DetailScreen(),
    },
  );
}

ここで指定したルートを次のように呼びます。名前付きルート。完全な例については、次のとおりですの名前付きルートでナビゲートするFlutter クックブックのレシピ。

制限事項

名前付きルートはディープリンクを処理できますが、動作は常に同じです。カスタマイズすることはできません。新しいディープリンクがプラットフォームによって受信されると、Flutter 新しいものをプッシュしますRouteユーザーが現在どこにいるかに関係なく、ナビゲーターに表示されます。

Flutter は、次を使用するアプリケーションのブラウザの進むボタンもサポートしていません。名前付きルート。これらの理由から、ほとんどの場合、名前付きルートの使用はお勧めしません。アプリケーション。

ルーターの使用

高度なナビゲーションおよびルーティング要件を備えた Flutter アプリケーション ( 各画面への直接リンクを使用する Web アプリ、または複数の画面を持つアプリNavigatorウィジェット) のようなルーティングパッケージを使用する必要があります。go_routerができるルートパスを解析し、Navigatorアプリが受信するたびに、新しいディープリンク。

ルーターを使用するには、に切り替えます。routerコンストラクター上のMaterialAppまたCupertinoAppそしてそれを提供しますRouter構成。ルーティングパッケージ、そのようなgo_router、通常は、あなたのための設定。例えば：

MaterialApp.router(
  routerConfig: GoRouter(
    // …
  )
);

go_router のようなパッケージは宣言的な、常に表示されますディープリンクを受信したときと同じ画面。

ルーターとナビゲーターを併用する

のRouterとNavigator連携して動作するように設計されています。ナビゲートできますを使用してRouter次のような宣言型ルーティングパッケージを介した APIgo_router、または次のような命令型メソッドを呼び出すことによって、push()とpop()の上のNavigator。

を使用してナビゲートするとき、Routerまたは宣言型ルーティングパッケージ、それぞれナビゲーター上のルートはページバック付き、から作成されたことを意味します。Pageを使用してpagesに関する議論Navigatorコンストラクタ。逆に、どれでも、Route電話して作成したNavigator.pushまたshowDialogを追加しますページレスナビゲーターへのルート。ルーティングパッケージを使用している場合、ページバック付き常にディープリンク可能ですが、ページレスルートそうではありません。

ときページバック付き Routeから削除されますNavigator、すべてのページレスそれ以降のルートも削除されます。たとえば、ディープリンクの場合、を削除してナビゲートしますページバック付きナビゲーターからのルート、すべてページレス _routes after (次の _page-backed まで)ルート）も削除されます。

ウェブサポート

を使用するアプリRouterクラスはブラウザ履歴 API と統合して提供しますブラウザの「戻る」ボタンと「進む」ボタンを使用するときの一貫したエクスペリエンス。を使用してナビゲートするたびに、Router、履歴 API エントリがブラウザの履歴スタック。を押すと、戻るボタンの用途逆行時系列ナビゲーション、ユーザーが以前の場所に移動することを意味します。を使用して表示された訪問した場所Router。これは、ユーザーがからページをポップしますNavigatorそしてブラウザを押します戻るボタン前のページがスタックにプッシュバックされます。

詳しくは

ナビゲーションとルートの詳細については、以下を確認してください。資力：

Flutter クックブックには複数の内容が含まれていますナビゲーションレシピ方法を示すもの使用Navigator。
のNavigatorとRouterAPI ドキュメントには、その方法の詳細が記載されています。ルーティングパッケージを使用せずに宣言型ナビゲーションをセットアップします。
ナビゲーションを理解する、マテリアルデザインドキュメントのページ、アプリ内のナビゲーションを設計するための概念を概説します。前方、上方、および時系列のナビゲーションについての説明。
Flutter の新しいナビゲーションおよびルーティングシステムを学習するに関する記事です。メディア、使用方法について説明します。Routerウィジェットを使用せずに直接ルーティングパッケージ。
のルーターの設計書の動機とデザインが含まれています。ルーターAPI。